/<template>
  <div :id="id" :style="{ width: width, height: height }"></div>
</template>

<script>
export default {
  name: "EchartsMove",
  props: {
    id: {
      type: String,
      default: "myChart"
    },
    width: {
      type: String,
      default: "100%"
    },

    height: {
      type: String,
      default: "400px"
    },
    seriesData: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {};
  },
  watch: {
    seriesData: {
      deep: true,
      handler(val) {
        this.drawLine(val);
      }
    }
  },
  mounted() {
    this.$nextTick(function() {
      this.drawLine();
    });
  },

  methods: {
    drawLine(data) {
    
        if(!data) return;
      let myChart = this.echarts.init(document.getElementById(this.$props.id));
      let options = {
        title: {
          text: "迁移任务统计"
        },
        xAxis: {
          type: "category",
          data:  data?data[1]:data[1]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            type: "bar",
            data:  data?data[0]:data[0],
            barWidth: "40px",
            // #347dfe
            color: "#347dfe" //更换颜色
          }
        ]
      };
      window.addEventListener("resize", () => {
        myChart.resize();
      });
      myChart.setOption(options);
    }
  }
};
</script>

<style>

</style>